<template>
    <div class="skeleton-con">
        <el-skeleton animated>
            <template slot="template">
                <div class="list">
                    <div 
                    class="item" 
                    v-for="item in num" 
                    :key="item"
                    >
                        <el-skeleton-item 
                            variant="text" 
                            style="height: 38px;"
                        />
                    </div>
                </div>
            </template>
        </el-skeleton>
    </div>
</template>

<script>
export default {
    props: {
        num: {
            type: Number,
            default: 10,
        },
    },
}
</script>

<style lang="scss" scoped>
    .skeleton-con{
        width: 100%;

        .list{
            display: flex;
            flex-wrap: wrap;

            .item{
                flex: 0 1 25%;
                padding: 6px 10px;
            }
        }
    }
</style>